<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>注册</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keywords" content="" >
    <!-- BootStrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link href="/css/register.css" rel="stylesheet">
</head>

<body class="text-center">
    <div id="registerPop">
        <div class="alert alert-success" role="alert" v-if="register && register_status">
            注册成功
        </div>
        <div class="alert alert-danger" role="alert" v-if="register && !register_status">
            注册失败，用户名已被使用
        </div>
    </div>
    <form id="registerForm" class="form-register" action="" method="POST" v-on:submit="doRegister">
        <img class="mb-4" src="/img/register.jpg" alt="" width="120" height="120">
        <div class="form-group" style="text-align:left;">
            <label for="InputUserName">UserName</label>
            <input name="username" v-model="username" type="text" class="form-control" id="InputUserName" required autofocus>
        </div>
        <div class="form-group" style="text-align:left;">
            <label for="InputPassword1">Password</label>
            <input name="password" v-model="password" type="password" class="form-control" id="InputPassword1" required>
        </div>
        <div class="form-group" style="text-align:left;">
            <label for="InputEmail1">Email address</label>
            <input name="email" v-model="email" type="email" class="form-control" id="InputEmail1" aria-describedby="emailHelp" required v-on:keyup.enter="doRegister">
        </div>
        <input type="button" class="btn btn-lg btn-primary btn-block" v-on:click="doRegister" value="注册">
    </form>

    <!-- BootStrap -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>
    <!-- Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 注册操作 -->
    <script>
        var registerPop = new Vue({
            el: "#registerPop",
            data: {
                register: false,
                register_status: false
            }
        })
        var registerForm = new Vue({
            el: "#registerForm",
            data: {
                username: "",
                password: "",
                email: ""
            },
            methods: {
                doRegister: function() {
                    if (this.username != "" && this.password != "" && this.email != "")
                    {
                        axios({
                            method: "POST",
                            url: "/api/login/register",
                            data: {
                                "userName": this.username,
                                "passWord": this.password,
                                "email": this.email
                            }
                        })
                        .then(function(response) {
                            var data = response.data
                            registerPop.register = true
                            registerPop.register_status = data.success
                            if (data.success)   // 注册成功
                            {
                                window.location = "/login?username=" + registerForm.username
                            }
                        })
                        .catch(function(error) {
                            console.log(error)
                        })
                    }
                }
            }
        })
    </script>
</body>

</html>
